<template>
	<view class="v-textarea-container">
		<textarea
			:value="inputValue"
			:class="['v-textarea', { 'v-textarea--disabled': disabled, 'v-textarea--focused': focused }, `v-textarea--border--${boderModel}`]"
			:placeholder="placeholder"
			:maxlength="maxlength || undefined"
			:disabled="disabled"
			:auto-height="autoHeight"
			@input="handleInput"
			@focus="handleFocus"
			@blur="handleBlur"
			@confirm="handleConfirm"
		></textarea>
		<view v-if="showCounter" class="v-textarea-counter">{{ currentLength }}/{{ maxlength }}</view>
	</view>
</template>

<script setup lang="ts">
import { ref, watch,inject } from 'vue';

/**
 * v-textarea 文本框
 * value 		双向绑定
 * placeholder 	提示词
 * maxlength	最大输入限制
 * disabled		是否禁用				默认值:false		可选值:true禁用	false不禁用
 * autoHeight	是否自动延长高度		默认值:true		可选值:true禁用	false不禁用
 * boderModel	边框模式				默认值:all		可选值:all普通边框 nont无边框模式 bottom底部边框模式 top上边框模式 left左边框模式 right右边框模式 ends左右两端边框模式 up-down上下边框模式
 * showCounter	是否显示字数
 * inputTextPosition 输入框文本位置  默认值：left  可选值：left居左 right居右 center居中
 * 相关事件:focus、blur、confirm
 */
const props = defineProps({
	value: {
		type: String,
		default: '',
		required: true
	},
	placeholder: {
		type: String,
		default: ''
	},
	maxlength: {
		type: Number,
		default: null
	},
	disabled: {
		type: Boolean,
		default: false
	},
	autoHeight: {
		type: Boolean,
		default: true
	},
	boderModel: {
		type: String,
		default: 'all'
	},
	showCounter: {
		type: Boolean,
		default: false
	},
	inputTextPosition:{
		type:String,
		default:"left"
	}
});

const emit = defineEmits(['update:value', 'input', 'focus', 'blur', 'confirm']);

const config = inject<any>('config');
const inputValue = ref(props.value);
const focused = ref(false);
const currentLength = ref(props.value.length);

watch(
	() => props.value,
	(newVal) => {
		inputValue.value = newVal;
		currentLength.value = newVal.length;
	}
);

const handleInput = (e: any) => {
	const value = e.detail.value;
	inputValue.value = value;
	currentLength.value = value.length;
	emit('update:value', value);
	emit('input', value);
};

const handleFocus = (e: any) => {
	focused.value = true;
	emit('focus', e);
};

const handleBlur = (e: any) => {
	focused.value = false;
	emit('blur', e);
};

const handleConfirm = (e: any) => {
	emit('confirm', e);
};
</script>

<style lang="scss" scoped>
.v-textarea-container {
	position: relative;
}

.v-textarea {
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
	background-color: #fff;
	font-size:  v-bind("config.fontSize.mediumText");
	line-height: 1.5;
	transition: border-color 0.3s;
	resize: none;
	text-align: v-bind("props.inputTextPosition");

	&--border--all {
		border-radius: 6rpx;
		border: 1px solid v-bind("config.border.color");

		&.v-textarea--focused {
			border-color: v-bind("config.border.default");
			box-shadow: v-bind("config.VInput.boxShadow");
		}
	}

	&--border--none {
		border: none;
	}

	&--border--bottom {
		border-bottom: 1rpx solid v-bind("config.border.color");
	}

	&--border--top {
		border-top: 1rpx solid v-bind("config.border.color");
	}

	&--border--left {
		border-left: 1rpx solid v-bind("config.border.color");
	}

	&--border--right {
		border-right: 1rpx solid v-bind("config.border.color");
	}

	&--border--ends {
		border-left: 1rpx solid v-bind("config.border.color");
		border-right: 1rpx solid v-bind("config.border.color");
	}

	&--border--up-down {
		border-top: 1rpx solid v-bind("config.border.color");
		border-bottom: 1rpx solid v-bind("config.border.color");
	}
	
	&--disabled{
		opacity: v-bind('config.opacity.disabled');
		background-color: v-bind('config.backgroundColor.disabled');
		color: v-bind('config.fontColor.text');
	}
}

.v-textarea-counter {
	position: absolute;
	bottom: 5rpx;
	right: 5rpx;
	font-size: v-bind("config.fontSize.mediumText");
	color: #999;
}
</style>
